<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
    <!-- import JavaScript -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script src="../js/eui.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<!--    3.编写组件标签-->
    <school></school>
    <hr>
    <student></student>
    <hr>
    <hello></hello>
</div>
<div id="root2">
    <hello></hello>
</div>
</body>
<script type="text/javascript">
    /*
    Vue使用组件的步骤：
        1定义组件
        2.注册组件
        3.使用组件
    一、如何定义一个组件？
        使用Vue.extend（options创建），其中options和new Vue时传入的options几乎一样，但是也有区别：
            1.el不要写，因为----最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
            2.data必须写成函数,因为避免组件复用时，数据存在引用关系。
     二、如何注册组件
        1.局部注册:new Vue时传入components选项
        2.全局注册：Vue.component('组件名',组件)
      三、使用组件：
        编写组件标签：
            <hello></hello>
     */
    Vue.config.productionTip = false;
    //1.创建school组件
    const school = Vue.extend({
        template:`
        <div>
           <h2>学校名称：{{schoolName}}</h2>
           <h2>学校地址：{{address}}</h2>
           <button @click="showName">点我提示学校名</button>
        </div>
        `,
        //el:'#root',//一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
        data(){
            return {
                schoolName:'尚硅谷',
                address:'北京昌平',
                }
            },
        methods:{
            showName(){
                alert(this.schoolName);
            }
        }
    })

    //创建student组件
    const student = Vue.extend({
        template:`
        <div>
           <h2>学生名称：{{studentName}}</h2>
           <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data(){
            return {
                studentName:'张三',
                age:18,
            }
        }
    })

    //创建hello组件
    const hello =  Vue.extend({
        template:`
        <div>
          <h2>你好啊，{{name}}</h2>
        </div>
        `,
        data(){
            return {
                name:'Tom'
            }
        }
    })

    //全局注册组件
    Vue.component('hello',hello);
    let vm = new Vue({
        el:'#root',
        //2.注册组件（局部注册）
        components:{
            school: school,
            student,
        }
    })

    new Vue({
        el:'#root2'
    })
</script>
</html>